import React, { Component } from 'react';
import {observer} from 'mobx-react';
import { Input, Button,Tooltip } from 'antd';
import model from './register_model';
import './register_styles.less';
@observer
class MainLayout extends Component {
  
  render() {
    return (
      <div className="reg-container">
        <div className="box">
          <h2>注册</h2>
          <Tooltip title="请输入用户名">
            <Input 
              style={{marginBottom:10}}
              value={model.username} 
              onChange={(e)=>{
                model.setUsername(e.target.value);
              }}
              placeholder="请输入用户名"
            />
          </Tooltip>
          <Tooltip title="请输入用户密码">
            <Input 
              style={{marginBottom:10}}
              value={model.password} 
              type="password"
              onChange={(e)=>{
                model.setPassword(e.target.value);
              }}
              placeholder="请输入用户密码"
            />
          </Tooltip>
          <Tooltip title="请再次输入用户密码">
            <Input 
              style={{marginBottom:10}}
              value={model.password1} 
              type="password"
              onChange={(e)=>{
                model.setPassword1(e.target.value);
              }}
              placeholder="请再次输入用户密码"
            />
          </Tooltip>
          <div className="opts">
            <Button onClick={model.reg} type="primary">注册</Button>
            <Button onClick={model.setEmpty}>置空</Button>
          </div>
        </div>
      </div>
    );
  }
}

export default MainLayout;
